<template>
    <div class="hd_login">
        <div class="hd_left">
            <!-- 关于抖音 -->
            <el-dropdown class="first" placement="bottom">
                <span class="el-dropdown-link">关于抖音</span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>抖音开放平台</el-dropdown-item>
                    <el-dropdown-item>认证与合作</el-dropdown-item>
                    <el-dropdown-item>广告投放</el-dropdown-item>
                    <el-dropdown-item>关于我们</el-dropdown-item>
                    <el-dropdown-item>抖音电商</el-dropdown-item>
                    <el-dropdown-item>透明度报告</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <!-- 添加到桌面 -->
            <el-dropdown placement="bottom">
                <span class="el-dropdown-link">添加到桌面</span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item class="dsk">
                        <img class="icon" src="@/assets/icon.png" alt="" />
                        <p>添加抖音到电脑桌面</p>
                        <p style="font-size: 12px">
                            下次可以在桌面访问快捷抖音
                        </p>
                        <button class="btn_add">立即添加</button>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <!-- 创作者服务 -->
            <el-dropdown>
                <a
                    href="https://creator.douyin.com/"
                    target="_blank"
                    class="el-dropdown-link"
                    >创作者服务
                </a>
                <el-dropdown-menu slot="dropdown" class="el_end"></el-dropdown-menu>
            </el-dropdown>
            <!-- 发布与登录 -->
            <div class="box_r">
                <button class="up_video">
                    <i class="el-icon-plus"></i>
                    <span> 发布视频</span>
                </button>
                <button class="btn_login">登录</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    
};
</script>

<style lang="less" scoped>
// Element 样式
.el-dropdown {
    line-height: 40px;
    padding: 0 16px;
}
.first {
    padding-left: 0;
}
.el-dropdown-link {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
}
.el-dropdown-link:hover {
    color: rgb(242, 42, 81);
}
.el-icon-arrow-down {
    font-size: 12px;
}
.el-dropdown-menu {
    border: 1px solid #252632;
    background-color: #252632;
    a {
        font-size: 14px;
    }
}
.el_end {
    border: 0;
}
.el-dropdown-menu__item {
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
}
.el-dropdown-menu__item:hover {
    background: none !important;
    color: rgba(255, 255, 255, 0.8) !important;
}
/deep/ .popper__arrow {
    display: none !important;
}
// Add to desktop
.dsk {
    padding: 0 30px 20px 30px;
    p {
        line-height: 24px;
    }
}
.icon {
    display: block;
    width: 55px;
    height: 55px;
    margin: 20px auto;
    margin-bottom: 10px;
}
.btn_add {
    width: 180px;
    height: 38px;
    background-color: #fe2c55;
    border-radius: 4px;
    margin-top: 20px;
    color: #fff;
    font-size: 14px;
}
.btn_add:hover {
    background-color: #f22a51;
}
// Publish video and login
.hd_left {
    position: relative;
    .box_r {
        position: relative;
        width: 228px;
        height: 40px;
        // background-color: red;
        position: absolute;
        top: 0;
        right: 0;
        .btn_login {
            width: 104px;
            height: 38px;
            line-height: 38px;
            background-color: #fe2c55;
            border-radius: 4px;
            color: #fff;
            font-size: 15px;
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(0, -50%);
        }
        .btn_login:hover {
            background-color: #f22a51;
        }
        .up_video {
            width: 108px;
            height: 40px;
            background-color: #161722;
            border-radius: 6px;
            border: 2px solid #fff;
            color: #fff;
            font-size: 15px;
        }
    }
}
// 公共样式
.btn_add,
.btn_login,
.up_video {
    font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei",
        "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", sans-serif;
    cursor: pointer;
}
</style>